import { createRouter, createWebHistory, RouterLink } from 'vue-router'
import Home from './components/Home.vue'
import Movie from './components/Movie.vue'
import About from './components/About.vue'
import HelloWorld from './components/HelloWorld.vue'
import Login from './components/Login.vue'
import Notfound from './components/Notfound.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', component: HelloWorld },
        { path: '/login', component: Login },
        { path: '/home/:id?', component: Home },
        { path: '/movie', component: Movie },
        { path: '/about', component: About },
        { path: '/:pathMatch(.*)*', component: Notfound }
    ]

})
//全局前置守卫
// 每次发生路由的导航跳转时，都会触发全局前置守卫，因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制
// router.beforeEach((to, from) => {
//     if (to.params.id === '2') {
//         return to.fullPath = '/login'
//     }
//     console.log(to);
//     console.log(from);
//     // next()
// })
//全局解析守卫
// 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，因为它在 每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。
// router.beforeResolve((to,from,next)=>{
//     console.log(to);
//     console.log(from);
//     next()
// })

//全局后置钩子
// 你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
// router.afterEach((to,from)=>{
//     console.log(to);
//     console.log(from);
// })
export default router